/**
 * 大事件图
 * bigEvent (reactCharts)
 * @author zxy
 * @date  2020-11-30
 */
import React from 'react';
import { FirstHeaderC, SecondHeaderC, BigEventC } from '../../components';
import { Row, Col, Button } from 'antd';

class bigEventChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bd1: '2020-01-01',
      ed1: '2020-08-19',
      series1: [
        {
          name: '七日年化收益率',
          data: [
            { value: 11, event: '成立以来创新高', date: '2020-01-05' },
            { value: -8, event: '成立以来创新低', date: '2020-05-21' },
          ],
        },
        {
          name: '资产份额',
          data: [
            { value: 8, event: '近六个月增长超30%', date: '2020-04-28' },
            { value: -9, event: '近1年下降超30%', date: '2020-02-28' },
          ],
        },
        {
          name: '资产净值',
          data: [
            { value: 7, event: '首次超过10亿', date: '2020-01-01' },
            { value: 9, event: '创新高', date: '2020-01-05' },
            { value: -10, event: '创新低', date: '2020-05-21' },
          ],
        },
        {
          name: '分红配送',
          data: [
            { value: 0, event: '分红派息xx元', date: '2020-01-01' },
            { value: 0, event: '分红派息xx元', date: '2020-01-10' },
            { value: 0, event: '分红派息xx元', date: '2020-01-20' },
            { value: 0, event: '分红派息xx元', date: '2020-01-30' },
            { value: 0, event: '分红派息xx元', date: '2020-02-10' },
            { value: 0, event: '分红派息xx元', date: '2020-02-20' },
            { value: 0, event: '分红派息xx元', date: '2020-02-28' },
            { value: 0, event: '分红派息xx元', date: '2020-03-10' },
            { value: 0, event: '分红派息xx元', date: '2020-03-20' },
            { value: 0, event: '分红派息xx元', date: '2020-03-30' },
            { value: 0, event: '分红派息xx元', date: '2020-04-10' },
            { value: 0, event: '分红派息xx元', date: '2020-04-20' },
            { value: 0, event: '分红派息xx元', date: '2020-05-01' },
            { value: 0, event: '分红派息xx元', date: '2020-05-10' },
            { value: 0, event: '分红派息xx元', date: '2020-05-20' },
            { value: 0, event: '分红派息xx元', date: '2020-05-30' },
            { value: 0, event: '分红派息xx元', date: '2020-06-10' },
            { value: 0, event: '分红派息xx元', date: '2020-06-20' },
            { value: 0, event: '分红派息xx元', date: '2020-06-30' },
            { value: 0, event: '分红派息xx元', date: '2020-07-10' },
            { value: 0, event: '分红派息xx元', date: '2020-07-20' },
            { value: 0, event: '分红派息16元', date: '2020-07-30' },
            { value: 0, event: '分红派息12.55元', date: '2020-08-01' },
            { value: 0, event: '分红派息41.23元', date: '2020-08-05' },
            { value: 0, event: '分红派息33.33元', date: '2020-08-10' },
          ],
        },
      ],
      bd2: undefined,
      ed2: undefined,
      series2: undefined,
      bd3: '2020-01-01',
      ed3: '2020-08-19',
      series3: [
        {
          name: '七日年化收益率',
          data: [{ value: 11, event: '成立以来创新高', date: '2020-01-05' }],
        },
        {
          name: '资产份额',
          data: [{ value: 7, event: '近六个月增长超30%', date: '2020-04-28' }],
        },
        {
          name: '资产净值',
          data: [
            { value: 8, event: '首次超过10亿', date: '2020-01-01' },
            { value: 10, event: '创新高', date: '2020-08-19' },
          ],
        },
        {
          name: '分红配送',
          data: [
            { value: 0, event: '分红派息xx元', date: '2020-05-01' },
            { value: 0, event: '分红派息xx元', date: '2020-07-19' },
          ],
        },
      ],
      bd4: '2020-01-01',
      ed4: '2020-08-19',
      series4: [
        {
          name: '七日年化收益率',
          data: [{ value: -8, event: '成立以来创新低', date: '2020-05-21' }],
        },
        {
          name: '资产份额',
          data: [{ value: -9, event: '近1年下降超30%', date: '2020-02-28' }],
        },
        {
          name: '资产净值',
          data: [{ value: -9, event: '创新低', date: '2020-01-01' }],
        },
        {
          name: '分红配送',
          data: [
            { value: 0, event: '分红派息xx元', date: '2020-05-01' },
            { value: 0, event: '分红派息xx元', date: '2020-07-19' },
          ],
        },
      ],
      bd5: '2020-01-01',
      ed5: '2020-01-07',
      series5: [
        {
          name: '七日年化收益率',
          data: [
            { value: 11, event: '成立以来创新高', date: '2020-01-01' },
            { value: -8, event: '成立以来创新低', date: '2020-01-07' },
          ],
        },
        {
          name: '资产份额',
          data: [
            { value: 7, event: '近六个月增长超30%', date: '2020-01-07' },
            { value: -7, event: '近1年下降超30%', date: '2020-01-04' },
          ],
        },
        {
          name: '资产净值',
          data: [
            { value: 8, event: '首次超过10亿', date: '2020-01-05' },
            { value: 2, event: '首次超过5000万', date: '2020-01-07' },
          ],
        },
        {
          name: '分红配送',
          data: [
            { value: 0, event: '分红派息xx元', date: '2020-01-06' },
            { value: 0, event: '分红派息xx元', date: '2020-01-07' },
          ],
        },
      ],
    };

    setTimeout(() => {
      this.setState({
        bd2: '2020-01-01',
        ed2: '2020-08-19',
        series2: [
          {
            name: '七日年化收益率',
            data: [
              // {value: 11, event: '成立以来七日年化收益率创新高', date: '2020-01-05'},
              // {value: -8, event: '成立以来七日年化收益率创新低', date: '2020-05-21'}
              { value: 11, event: '成立以来创新高', date: '2020-01-05' },
              { value: -8, event: '成立以来创新低', date: '2020-05-21' },
            ],
          },
          {
            name: '资产份额',
            data: [
              { value: 7, event: '近六个月增长超30%', date: '2020-04-28' },
              { value: -9, event: '近1年下降超30%', date: '2020-02-28' },
              // {value: 7, event: '近六个月份额增长超过30%', date: '2020-04-28'}
            ],
          },
          {
            name: '资产净值',
            data: [
              // {value: 8, event: '资产净值首次超过10亿', date: '2020-01-01'},
              // {value: 10, event: '资产净值创新高', date: '2020-08-19'}
              { value: 8, event: '首次超过10亿', date: '2020-01-01' },
              { value: 10, event: '创新高', date: '2020-08-19' },
            ],
          },
          {
            name: '分红配送',
            data: [
              { value: 0, event: '分红派息xx元', date: '2020-05-01' },
              { value: 0, event: '分红派息xx元', date: '2020-07-19' },
            ],
          },
        ],
      });
    }, 3000);
  }

  render() {
    return (
      <div>
        <FirstHeaderC title='大事件图' />
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='同步加载数据' />
            <BigEventC beginDate={this.state.bd1} endDate={this.state.ed1} series={this.state.series1} height='500px' showBorder={false} />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='异步加载数据' />
            <BigEventC beginDate={this.state.bd2} endDate={this.state.ed2} series={this.state.series2} height='500px' showBorder={false} />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='仅增长' />
            <BigEventC beginDate={this.state.bd3} endDate={this.state.ed3} series={this.state.series3} height='500px' showBorder={false} />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='仅下降' />
            <BigEventC beginDate={this.state.bd4} endDate={this.state.ed4} series={this.state.series4} height='500px' showBorder={false} />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='少量数据' />
            <BigEventC beginDate={this.state.bd5} endDate={this.state.ed5} series={this.state.series5} height='500px' showBorder={false} />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='有滚动轴&颜色pink&有标题&左轴距离设置120&右轴80' />
            <BigEventC
              title={'我是标题'}
              gridLeft={120}
              gridRight={80}
              colors={'pink'}
              dataZoom
              beginDate={this.state.bd1}
              endDate={this.state.ed1}
              series={this.state.series1}
              height='500px'
              showBorder={false}
            />
          </Col>
        </Row>
      </div>
    );
  }
}

export default bigEventChart;
